import Taro from "@tarojs/taro";
import { View } from "@tarojs/components";
import { Button, Card } from "@antmjs/vantui";
import { useState } from "react";
import "./purchase.scss";

const Purchase = () => {
  Taro.setNavigationBarTitle({ title: "我的购买" });

  const [card, setCard] = useState([
    {
      num: "2",
      tag: "标签",
      price: "10元",
      desc: "描述",
      title: "标签",
      thumb: "https://image.meiye.art/pic_1628435137573",
      id: 1
    },
    {
      num: "3",
      tag: "标签",
      price: "10元",
      desc: "描述",
      title: "标签3",
      thumb: "https://image.meiye.art/pic_1628435137573",
      id: 2
    }
  ]);

  const handleDelete = (value: any) => {
    const index = card.findIndex(item => item.id === value.id);
    card.splice(index, 1);
    setCard([...card]);
  };

  const handleBuy = (value: any) => {
    Taro.navigateTo({
      url: "/pages/person/purchase/detail/detail"
    });
  };

  return (
    <View className="card">
      {card.map(content => {
        return (
          <Card
            className="cardlist"
            num={content.num}
            tag={content.tag}
            price={content.price}
            desc={content.desc}
            title={content.title}
            thumb={content.thumb}
            renderFooter={
              <View>
                <Button size="mini" onClick={() => handleBuy(content)}>
                  再次购买
                </Button>
                <Button size="mini" onClick={() => handleDelete(content)}>
                  删除
                </Button>
              </View>
            }
          />
        );
      })}
      
    </View>
  );
};
export default Purchase;
